<template>
  <div class="login-form">
    <div class="g-form">
      <div class="g-form-line">
        <span class="g-form-label">用户名:</span>
        <div class="g-form-input">
          <input type="text"
                 v-model="usernameModel" placeholder="请输入用户名">
        </div>
        <span class="g-form-error">{{userErrors.errorText}}</span>
      </div>

      <div class="g-form-line">
        <span class="g-form-label">密码:</span>
        <div class="g-form-input">
          <input type="password"
                 v-model="passwordModel" placeholder="请输入密码">
        </div>
        <span class="g-form-error">{{passwordErrors.errorText}}</span>
      </div>

      <div class="g-form-line">
        <div class="g-form-btn">
          <button class="button" @click="onLogin">登录</button>
        </div>
        <p>{{errorText}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed:{

    /*用户名输入的格式判断*/
    userErrors() {
      let errorText,status;
      if(!/@/g.test(this.usernameModel)){
        status=false;
        errorText='不包含@'
      }
      else {
        status=true;
        errorText='';
      }

      //用这个只是为了解决出来就会显示errorText的错误
      if(!this.userFlag) {
        errorText=''
        this.userFlag=true
      }

      return {
        status,errorText
      }
    },

    /*密码输入格式的判断*/
    passwordErrors () {
      let errorText,status
      if (!/^\w{1,6}$/g.test(this.passwordModel)) {
        status = false
        errorText = '密码不是1-6位'
      }
      else {
        status=true
        errorText=''
      }

      if(!this.passwordFlag){
        errorText=''
        this.passwordFlag=true
      }

      return {
        status,
        errorText
      }
    }
  },
  methods:{
    onLogin (){
      if(!this.userErrors.status || !this.passwordErrors.status){
        this.errorText='部分选项未通过'
      }
      else {
        this.errorText='';
        this.$http.get('api/login')
          .then((res) => {
            this.$emit('has-log',res.data)
          },(error) => {
            console.log(error)
          })
      }
    }
  },
  data(){
    return {
      usernameModel:'',
      passwordModel:'',
      errorText:''
    }
  }
}
</script>

<style scoped>
</style>
